<template>
  <el-row id="exam-choice-problem-box">
    <Breadcrumb :breadcrumb="breadcrumb"/>
    <!-- <div id="filter-box">
        <el-row id="problem-search-box">
            <el-col :span="2">
                <label>搜索题目:</label>
            </el-col>
            <el-col :span="10">
                <el-input placeholder="输入题干" v-model="searchValue" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </el-col>
        </el-row>
    </div> -->
    <el-row id="filter-box">
      <el-col :span="12" id="problem-difficulty-box">
        <el-row>
            <el-col :span="4">
            <label class="tag1">难度:</label>
            </el-col>
            <el-col :span="20" class="radio-group">
            <el-radio-group v-model="problemDifficultyValue" @change="refreshProblemList">
                <el-radio label="全部">全部</el-radio>
                <el-radio label="简单">简单</el-radio>
                <el-radio label="中等">中等</el-radio>
                <el-radio label="困难">困难</el-radio>
            </el-radio-group>
            </el-col>
        </el-row>
      </el-col>
      <el-col :span="6" :offset="6" id="problem-label-box">
        <el-row>
          <el-button
          id="auditButton"
          class="buttonStyle1"
          type="primary"
          @click="addProblemListToExam()"
          >确认</el-button
          >
          <el-button
          id="auditButton"
          class="buttonStyle2"
          @click="goBack()"
          >取消并返回上一页</el-button
          >
        </el-row>
      </el-col>
      <!-- <el-col :span="12" id="problem-label-box">
          <el-row>
              <el-col :span="4">
              <label class="tag1">标签:</label>
              </el-col>
              <el-col :span="20" class="radio-group">
              <el-select
                  id="problem-label"
                  v-model="problemLabelValue"
                  multiple
                  placeholder="请选择"
              >
                  <el-option
                  v-for="item in labelOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  ></el-option>
              </el-select>
              </el-col>
          </el-row>
      </el-col> -->
    </el-row>
    <el-table
      id="problem-table"
      :data="problemData"
      style="width: 100%"
      ref="multipleTable"
      @selection-change="createUuId"
      :header-cell-style="{ background: '#fafafa' }"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        id="fold-column-box"
        type="expand"
        width="70"
        label="查看"
      >
      <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand" v-if="problemType == '选择题'">
            <el-form-item label="题目">
              <span>{{ props.row.problem }}</span>
            </el-form-item>
            <!-- <el-form-item label="题目类型">
              <span>{{ props.row.typeName }}</span>
            </el-form-item> -->
            <el-form-item label="选项A">
              <span>{{ props.row.choiceOp1 }}</span>
            </el-form-item>
            <el-form-item label="选项B">
              <span>{{ props.row.choiceOp2 }}</span>
            </el-form-item>
            <el-form-item label="选项C">
              <span>{{ props.row.choiceOp3 }}</span>
            </el-form-item>
            <el-form-item label="选项D">
              <span>{{ props.row.choiceOp4 }}</span>
            </el-form-item>
            <el-form-item label="答案">
              <span>{{ props.row.choiceAnsw }}</span>
            </el-form-item>
            <el-form-item label="解析">
              <span>{{ props.row.choiceParse }}</span>
            </el-form-item>
            <el-form-item label="难度">
              <span>{{ props.row.difficulty }}</span>
            </el-form-item>
            <!-- <el-form-item label="审核状态">
              <span>{{ props.row.audit }}</span>
            </el-form-item> -->
          </el-form>
          <el-form label-position="left" inline class="demo-table-expand" v-if="problemType == '简答题'">
            <el-form-item label="题目">
              <span>{{ props.row.problem }}</span>
            </el-form-item>
            <!-- <el-form-item label="题目类型">
              <span>{{ props.row.typeName }}</span>
            </el-form-item>  -->
            <el-form-item label="答案">
              <span>{{ props.row.essayAnsw }}</span>
            </el-form-item>
            <el-form-item label="解析">
              <span>{{ props.row.essayParse }}</span>
            </el-form-item>
            <el-form-item label="难度">
              <span>{{ props.row.difficulty }}</span>
            </el-form-item>
            <!-- <el-form-item label="审核状态">
              <span>{{ props.row.audit }}</span>
            </el-form-item> -->
          </el-form>
          <el-form label-position="left" inline class="demo-table-expand" v-if="problemType == '判断题'">
            <el-form-item label="题目">
              <span>{{ props.row.problem }}</span>
            </el-form-item>
            <!-- <el-form-item label="题目类型">
              <span>{{ props.row.typeName }}</span>
            </el-form-item>  -->
            <el-form-item label="答案">
              <span>{{ props.row.trueOrFalseAnsw }}</span>
            </el-form-item>
            <el-form-item label="解析">
              <span>{{ props.row.trueOrFalseParse }}</span>
            </el-form-item>
            <el-form-item label="难度">
              <span>{{ props.row.difficulty }}</span>
            </el-form-item>
            <!-- <el-form-item label="审核状态">
              <span>{{ props.row.audit }}</span>
            </el-form-item> -->
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="序号" type="index" width="90"> </el-table-column>
      <el-table-column prop="problem" label="题目" width="650">
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="90">
      </el-table-column>
      <el-table-column label="操作" width="270">
        <template>
          <el-button size="mini"
            >查看</el-button>
            <el-button size="mini"
            >选择</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row id="pagination-box">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        :total="total"
        layout="total,prev, pager, next "
        prev-text="上一页"
        next-text="下一页"
      >
      </el-pagination>
    </el-row>
  </el-row>
</template>
<script>
import Breadcrumb from '@/components/common/Breadcrumb';
import { mapState } from 'vuex'
export default {
    name: "ExamEditProblem",
    components: {
      Breadcrumb,
    },
    data(){
        return{
          pageNum: 1 ,
          pageSize: 5 ,
          total: 0 ,
          breadcrumb:[
            {name:"试卷管理",path:"exam"},
            {name:"所有试卷",path:"exam"},
            {name:"试卷编辑",path:"examEdit"},
            {name:"添加题目",path:""},
          ],
          problemType:this.$route.params.problemType,
          exam:this.$route.params.exam,
          // courseNameValue:"大学英语",
          searchValue:"",
          problemDifficultyValue: "全部",
          problemLabelValue: "",
          problemData: [
          ],
          allProblemData: [
          ],
          labelOptions: [
              {
              value: "必考题",
              label: "必考题",
              },
              {
              value: "压轴题",
              label: "压轴题",
              },
              {
              value: "基础题",
              label: "基础题",
              },
              {
              value: "期末考题",
              label: "期末考题",
              },
          ],
          multipleSelectionList: [],
          uuIdList:[]
        }
    },
    created(){
        this.GetProblemList(this.course.courseName,this.problemDifficultyValue)
    },
    methods: {
        //分页
        getTabelData() {
          //allData为全部数据
          if (this.allProblemData) {
          this.problemData = this.allProblemData.slice(
            (this.pageNum - 1) * this.pageSize,
            this.pageNum * this.pageSize
          );
          this.total=this.allProblemData.length}
        },
        // 分页序号
        getIndex($index) {
          return (
            (this.pageNum - 1) * this.pageSize + $index + 1
          );
        },
        handleSizeChange(pageSize) {
          this.pageSize=pageSize,
          this.getTabelData()
        },
        handleCurrentChange(pageNum) {
          this.pageNum=pageNum,
          this.getTabelData()
        },
        refreshProblemList(){
            this.GetProblemList(this.course.courseName,this.problemDifficultyValue)
        },
        GetProblemList(courseName,problemDifficultyValue){
          if(this.problemType=="选择题"){
            this.GetChoiceList(courseName,problemDifficultyValue)
          }
          else if(this.problemType=="判断题"){
            this.GetTrueOrFalseList(courseName,problemDifficultyValue)
          }
          else if(this.problemType=="简答题"){
            this.GetEssayList(courseName,problemDifficultyValue)
          }
        },
        GetChoiceList(courseName,problemDifficultyValue){
          this.axios.get("/choice/toexam/"+courseName+"/"+problemDifficultyValue)
            .then(response => {
              if(response.status == 200){
                this.allProblemData = response.data.data;
                this.problemData=[];
                this.pageNum=1;
                this.getTabelData();    
              }
            }).catch(error => alert(error));
        },
        GetTrueOrFalseList(courseName,problemDifficultyValue){
          this.axios.get("/trueOrFalse/toexam/"+courseName+"/"+problemDifficultyValue)
            .then(response => {
              if(response.status == 200){
                this.allProblemData = response.data.data;
                this.problemData=[];
                this.pageNum=1;
                this.getTabelData(); 
                // console.log(this.problemData)
              }
            }).catch(error => alert(error));
        },
        GetEssayList(courseName,problemDifficultyValue){
          this.axios.get("/essay/toexam/"+courseName+"/"+problemDifficultyValue)
            .then(response => {
              if(response.status == 200){
                this.allProblemData = response.data.data;
                this.problemData=[];
                this.pageNum=1;
                this.getTabelData(); 
                // console.log(this.problemData)
              }
            }).catch(error => alert(error));
        },
        createUuId(valList) {
            var tempList =[]
            for(let i =0;i<valList.length;i++){
                // console.log(valList[i].uuId)
                tempList.push(valList[i].uuId)
            }
            this.uuIdList = tempList
            // console.log(this.uuIdList)
        },
        addProblemListToExam(){
          if(this.uuIdList.length<=0){
            this.$message.error('请先选择题目再添加题目!');
            return
          }
          
          this.axios.post("/examdata/addList",{examId: this.exam.examId, uuIdList: this.uuIdList})
            .then(response => {
                if(response.status == 200){
                    this.hintMessage("添加题目成功")
                    this.$refs.multipleTable.clearSelection()
                    this.$router.replace({name:'examEdit',params:{exam:this.exam}})
                    // this.router.go(-1)
                    // this.$router.replace('/ExamEdit');//跳转到路径
                }else{
                    alert("status:"+response.status)
                }
            })
            .catch(error => alert(error));
        },
        hintMessage(value){
          this.$message({
            showClose: true,
            message: value,
            type: 'success'
          });
        },
        goBack(){
          this.$router.push({name:'examEdit',params:{exam:this.exam}})
        }
    },
    computed:{
    ...mapState('course', {
        course:'course',
    }),
  },
};
</script>
<style scoped>
/* 自定义的样式 */
#exam-choice-problem-box{
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 20px;
    user-select: none;
    background-color: #f6fafb !important;
    height: 670px;
}

#exam-choice-problem-box #problem-search-box {
    padding-bottom: 10px;
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #dcdfe6 !important;
    margin-bottom: 30px;
    line-height: 40px;
}

.tag1 {
  /* font-weight: normal; */
  line-height: 40px;
  margin-bottom: 0px;
}
#problem-label-box {
  height: 40px;
  line-height: 40px;
}
#filter-box{
  padding-top: 20px;
  padding-bottom: 20px;
}
</style>

<style>
/* 修改element-ui的样式 */
#exam-choice-problem-box #problem-label {
  width: 350px;
  height: 40px !important;
}
#exam-choice-problem-box .radio-group {
  display: block;
  line-height: 40px;
}
#exam-choice-problem-box .buttonStyle1 {
  width: 80px;
  height: 30px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-right: 10px;
}
</style>